@font_family:"微软雅黑";
*{
	border:0px;
	margin:0px;
	padding:0px;
}
body{
	font-family: @font_family;
	#loader-wrapper {
	    position: fixed;
	    top: 0;
	    left: 0;
	    width: 100%;
	    height: 100%;
	    background-color: white;
	    z-index: 9999;
	}

	#loader {
	    display: block;
	    position: relative;
	    left: 50%;
	    top: 50%;
	    width: 150px;
	    height: 150px;
	    margin: -75px 0 0 -75px;
	    border-radius: 50%;
	    border: 3px solid transparent;
	    border-top-color: #000;
	    -webkit-animation: spin 2s linear infinite;
	    animation: spin 2s linear infinite;
	}
	#loader:before {
	    content: "";
	    position: absolute;
	    top: 5px;
	    left: 5px;
	    right: 5px;
	    bottom: 5px;
	    border-radius: 50%;
	    border: 3px solid transparent;
	    border-top-color: #000;
	    -webkit-animation: spin 3s linear infinite;
	    animation: spin 3s linear infinite;
	}

	#loader:after {
	    content: "";
	    position: absolute;
	    top: 15px;
	    left: 15px;
	    right: 15px;
	    bottom: 15px;
	    border-radius: 50%;
	    border: 3px solid transparent;
	    border-top-color: #000;
	    -webkit-animation: spin 1.5s linear infinite;
	    animation: spin 1.5s linear infinite;
	}

	@-webkit-keyframes spin {
	    0% {
	        -webkit-transform: rotate(0deg);
	        -ms-transform: rotate(0deg);
	        transform: rotate(0deg);
	    }

	    100% {
	        -webkit-transform: rotate(360deg);
	        -ms-transform: rotate(360deg);
	        transform: rotate(360deg);
	    }
	}

	@keyframes spin {
	    0% {
	        -webkit-transform: rotate(0deg);
	        -ms-transform: rotate(0deg);
	        transform: rotate(0deg);
	    }

	    100% {
	        -webkit-transform: rotate(360deg);
	        -ms-transform: rotate(360deg);
	        transform: rotate(360deg);
	    }
	}
	.first_page{
		position: relative;
		// height: 1055px;
		img{
			width: 100%;
			height: auto;
		}
		header{
			position: absolute;
			// top: 34px;
			// left: 38px;
		}
		.login_box{
			position: absolute;
			border-radius: 5px;
			// top: 100px;
			// left:38px;
			background-color: rgba(68, 68, 69, 0.8);
			color: #d7cec7;
			.people_img{
				position: relative;
				text-align: center;
			}
			.login_inputs{
				text-align: center;
				input{
					font-size: 18px;
					text-align: center;
					border: none;
					border-bottom: 2px solid #716f73;
					display: block;
					background-color: rgba(255, 255, 255, 0);
					outline: none;
				}
			}
			.login_btns{
				div{
					background-color: #716f73;
					border-radius: 5px;
					button{
						font-size: 22px;
						background-color: #716f73;
						outline: none;
						border-radius: 5px;
					}		
				}
			}
		}
	}
	.youjoin{
		position: absolute;
		// left: 832px;
		// top: 264px;
		// width: 254px;
		// height: 255px;
		div{
			position: relative;
			width: 100%;
			img{
				width: 100%;
				height: auto;
			}
			div{
				position: absolute;
				left: 74px;
				top: 96px;
				img{
					width: 100%;
					height: auto;
				}
			}
		}
	}
	.life{
		position: absolute;
		// left:600px;
		// top:554px;
		text-align: center;
		display: inline;
		width: 210px;
		color: #d7cec7;
		font-size: 18px;
		span{
			display: inline;
		}
	}
	.friend{
		position: absolute;
		// left:1130px;
		// top:670px;
		text-align: center;
		display: inline;
		width: 210px;
		color: #d7cec7;
		font-size: 18px;
		span{
			display: inline;
		}
	}
	.alone{
		position: absolute;
		// left:1550px;
		// top:440px;
		text-align: center;
		display: inline;
		width: 210px;
		color: #d7cec7;
		font-size: 18px;
		span{
			display: inline;
		}
	}
	.introduce{
		position: relative;
		text-align: center;
		.inttitle{
			font-size: 28px;
			// font:24px bold @font_family;
			margin-top: 40px;
			color: #dea66d;
		}
		.intcontent{
			font-size: 22px;
			line-height: 16px;
			margin-top: 45px;
			color:#999999;
			p{
				line-height: 40px;
			}
		}
	}
	.sign_button{
		text-align: center;
		margin-top: 45px;
		button{
			img{
				width: 100%;
				height: auto;
			}
		}
	}
	.youjoin_imgs{
		position: relative;
		width: 100%;
		background-image: url(../Img/youjoin_bg2.jpg);
		.img_dispaly{
			position: relative;
			// z-index: 1000px;
			// float: center;
			margin-top: 200px;
			// margin-left: 249px;
			// margin-right: 249px;
			text-align: center;
			// overflow: hidden;
			div{
				position: absolute;
				// width:300px;
				// margin-right: 30px;
				display:block;
				img{
					display: block;
					width: 100%;
					height: auto;
				}
			}
			.img1{
				top: -100px;
				left:34px;
			}
			.img2{
				top: 0px;
				left:658px;
			}
		}
	}
	.phone_display{
		position: relative;
		margin-top: 600px;
		// margin-left: 249px;
		// margin-right: 249px;
		text-align: center;
		div{
			display: inline;
		}
	}
	.download{
		text-align: center;
		margin-top: 100px;
		color: #999999;
		font-size: 22px;
		.downbtn{
			position: relative;
			margin-top: 100px;
			a{
				position: relative;
				img{
					width: 100%;
					height:auto;
				}
			}
		}
	}
	.youjoinfoot{
		background-color: #efefef;
		color: #999999;
		position: relative;
		margin-top: 100px;
		height:250px;
		border-bottom:2px solid #e3e3e3;
		div{
			ul{
				li{
					display: block;
					// font:14px solid @font_family;
					font-size: 16px;
					line-height: 24px;
				}
				li:first-child{
					line-height: 60px;
				}
			}
		}
		.foot1{
			position: absolute;
			top: 0px;
			left:25px;
		}
		.foot2{
			position: absolute;
			top: 0px;
			left:275px;
		}
		.foot3{
			position: absolute;
			top: 0px;
			left:525px;
		}
	}
	.foot-bottom{
		position: relative;
		height: 65px;
		width: 100%;
		background-color: #efefef;
		span{
			position: absolute;
			// float: left;
			top:0px;
			left:34px;
			line-height: 55px;
			color:#999999;
			font-size: 16px;
		}
		.foot-nav{
			// display: inline;
			position: absolute;
			height: 65px;
			// top: 0px;
			// left: 1475px;
			ul{
				position: relative;
				li{
					color:#999999;
					font-size: 16px;
					display: inline;
					float: right;
					padding-right:10px;
					line-height: 55px;
				}
			}
		}
	}
}
.circle_png{
	position: relative;
	border-radius: 28px;
	width: 28px;
	height: 28px;
	border:4px solid #d6cec7;
	opacity: 0.8;
	div{
		margin-top: 3px;
		margin-left: 3px;
		border-radius: 14px;
		width: 14px;
		height: 14px;
		background-color: #d6cec7;
		border:none;
	}
}
hr{
	width: 0px;
	height: 16px;
	border: 1px solid #999999;
}
